<template>
    <el-form :inline="true" class="search-form">
        <el-form-item label="通知单编号">
            <el-input v-model="page.noticeNo" placeholder="请输入通知单编号" />
        </el-form-item>
        <el-form-item label="通知单名称">
            <el-input v-model="page.noticeName" placeholder="请输入通知单名称" />
        </el-form-item>
        <el-form-item label="采购订单编号">
            <el-input v-model="page.storagePurchaseNo" placeholder="请输入采购订单编号" />
        </el-form-item>
        <el-form-item label="到货日期">
            <el-date-picker v-model="page.deliverydate" type="date" placeholder="选择日期" format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="单据状态">
            <el-select v-model="page.noticePurchase" placeholder="请选择" style="width: 100px">
                <el-option label="审批中" value="1" />
                <el-option label="已审批" value="2" />
                <el-option label="已确定" value="3" />
                <el-option label="已完成" value="4" />

                <!-- 其他状态选项 -->
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="show">搜索</el-button>
            <el-button @click="empty">重置</el-button>
        </el-form-item>
    </el-form>
    <div style="width: 100px">
        <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
    </div>

    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="noticeNo" label="入库单编号" width="180" />
        <el-table-column prop="noticeName" label="通知单名称" />
        <el-table-column prop="storagePurchaseNo" label="采购订单号" width="120" />
        <el-table-column prop="supplierName" label="供应商名称" width="220" />
        <el-table-column prop="contacts" label="联系人" width="120" />
        <el-table-column prop="contactway" label="联系方式" width="150" />
        <el-table-column prop="deliverydate" label="到货日期" width="120">
            <template #default="scope">
                {{ scope.row.deliverydate.substring(0, 10) }}
            </template>
        </el-table-column>

    </el-table>
    <div>
        <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize"
            :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>


    <div>
        <el-dialog v-model="dialogFormVisible" title="添加物料产品分类" width="1000">
            <el-form ref="ruleFormRef" style="max-width: 900px" :model="ruleForm" label-width="auto"
                class="demo-ruleForm" :size="formSize" status-icon>
                <el-form-item label="到货通知单编号" prop="NoticeNo">
                    <el-input v-model="ruleForm.NoticeNo" />
                </el-form-item>
                <el-form-item label="到货通知单名称" prop="NoticeName">
                    <el-input v-model="ruleForm.NoticeName" />
                </el-form-item>
                <el-form-item label="采购订单编号" prop="StoragePurchaseId">
                    <el-input v-model="ruleForm.StoragePurchaseId" />
                </el-form-item>
                <el-form-item label="供应商" prop="SupplierId">
                    <el-input v-model="ruleForm.SupplierId" />
                </el-form-item>
                <el-form-item label="到货日期" prop="Deliverydate">
                    <el-date-picker v-model="ruleForm.Deliverydate" type="datetime"
                        placeholder="Select date and time" />
                </el-form-item>
                <el-form-item label="联系人" prop="Contacts">
                    <el-input v-model="ruleForm.Contacts" />
                </el-form-item>
                <el-form-item label="联系方式" prop="Contactway">
                    <el-input v-model="ruleForm.Contactway" />
                </el-form-item>
                <el-form-item label="备注" prop="Contactremark">
                    <el-input v-model="ruleForm.Contactremark" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="AddForm(ruleFormRef)">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>


</template>
<script setup lang="ts">
import axios from 'axios';
import { ElMessage, ElMessageBox, ElTable, ElTableColumn } from 'element-plus';
import { onMounted, ref, reactive } from 'vue';
import type { FormInstance } from 'element-plus';
const apiUrl = import.meta.env.VITE_APP_API_URL;
const tableData = ref([]);
const dialogFormVisible = ref(false);

// 查询表单数据
const page = reactive({
    PageIndex: 1,
    PageSize: 10,
    totalCount: 0,
    totalPage: 0,
    noticeNo: '',
    noticeName: null,
    storagePurchaseNo: null,
    deliverydate: null,
    noticePurchase: null,
});

// 整合显示、查询和分页的方法111
const show = () => {
    axios.get(apiUrl + "/T5/Incominginformations/GetArrivalnotice", { params: page })
        .then((res) => {
            tableData.value = res.data.data;
            page.totalCount = res.data.totalCount;
            page.totalPage = res.data.totalPage;
        })
};

const empty = () => {
    page.noticeNo = '',
    page.noticeName = null,
    page.storagePurchaseNo = null,
    page.deliverydate = null,
    page.noticePurchase = null,
    show();
};


const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`);
    page.PageSize = val;
    show();
};
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`);
    page.PageIndex = val;
    show();
};


interface RuleForm {
    NoticeId: 0,
    NoticeNo: string,
    NoticeName: string,
    StoragePurchaseId: number,
    SupplierId: number,
    Deliverydate: Date,
    Contacts: string,
    Contactway: string,
    Contactremark: string,
    NoticeNumber: number,
    IsInspecs: boolean,
    QualifiedNum: number,
    InspecNumber: string,
    MId: number
}
const formSize = ref('default');
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
    NoticeId: 0,
    NoticeNo: '',
    NoticeName: '',
    StoragePurchaseId: 0,
    SupplierId: 0,
    Deliverydate: new Date(),
    Contacts: '',
    Contactway: '',
    Contactremark: '',
    NoticeNumber: 0,
    IsInspecs: false,
    QualifiedNum: 0,
    InspecNumber: '',
    MId: 0,
});

const AddForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            axios.post(apiUrl + "/T6/ProductInfos/AddMaterialproductclassification", ruleForm)
                .then(res => {
                    if (res.data.code === 100) {
                        ElMessage.success("添加成功!");
                        dialogFormVisible.value = false;
                        show();
                    } else {
                        ElMessage.error("添加失败，请稍后重试");
                    }
                })
                .catch((error) => {
                    console.error('添加物料产品失败:', error);
                    ElMessage.error('添加物料产品失败，请稍后重试');
                });
        } else {
            console.log('error submit!', fields);
            ElMessage.error('表单验证失败，请检查输入内容');
        }
    });
};



onMounted(() => {
    show();
});

</script>
<style >
    
</style>